<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>从电脑下载文件</title>
  <link rel="icon" href="{{ url_for('static', filename='favicon.svg') }}" type="image/svg+xml" />
  <link href="{{ url_for('static', filename='output.css') }}" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css" />
  <style>
    .file-grid {
      grid-template-columns: minmax(0, 3fr) minmax(100px, 1fr) minmax(120px, 1fr) minmax(120px, auto);
    }

    @media (max-width: 768px) {
      .file-grid {
        grid-template-columns: 1fr auto;
      }
    }
  </style>
</head>

<body class="min-h-screen bg-linear-to-tr from-neutral-50 to-neutral-100 p-4 sm:p-6">
  <div class="max-w-4xl mx-auto">
    <!-- 头部 -->
    <header class="bg-gradient-to-r from-gray-800 to-gray-900 text-white rounded-t-xl p-6 mb-6">
      <div class="flex items-center gap-4">
        <a href="/" class="text-white font-bold hover:text-gray-200 transition-colors">
          <i class="fas fa-arrow-left mr-2"></i>
        </a>
        <div>
          <h1 class="text-2xl font-bold">从电脑下载文件</h1>
          <p class="text-gray-300 mt-1">选择文件传输到您的移动设备</p>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
      <!-- 搜索区域 -->
      <div class="p-5 border-b border-gray-200">
        <div class="flex gap-3">
          <div class="relative flex-1">
            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
              <i class="fas fa-search text-gray-400"></i>
            </div>
            <input type="text"
              class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
              placeholder="搜索文件名..." />
          </div>
          <button
            class="bg-gray-800 hover:bg-gray-700 text-white px-5 rounded-lg transition-colors flex items-center gap-2">
            <i class="fas fa-search"></i>
            <span class="hidden sm:inline">搜索</span>
          </button>
        </div>
      </div>

      <!-- 文件列表头部（桌面端显示） -->
      <div
        class="file-grid hidden md:grid items-center gap-4 p-4 bg-gray-50 text-gray-600 font-medium border-b border-gray-200">
        <div class="flex items-center">
          <i class="fas fa-file mr-3 text-gray-500"></i>
          <span>文件名</span>
        </div>
        <div class="flex items-center">
          <span>大小</span>
        </div>
        <div class="flex items-center">
          <i class="far fa-clock mr-3 text-gray-500"></i>
          <span>修改时间</span>
        </div>
        <div class="flex items-center justify-center">操作</div>
      </div>

      <!-- 文件列表内容 -->
      <div class="overflow-hidden border-b border-gray-200">
        {% if files %}
        {% for file in files %}

        <div
          class="file-row grid file-grid items-center gap-4 p-4 transition-all hover:bg-neutral-50 border-b border-gray-200 last:border-b-0">
          <div class="flex items-center">
            {% set ext = file.name.split('.')[-1].lower() %}
            {% set file_type = file_type_mapping.get(ext, {}) %}
            <div
              class="file-icon-container w-10 h-10 mr-4 rounded-lg flex items-center justify-center flex-shrink-0 {{ file_type.get('style', 'bg-gray-100 text-gray-600') }}">
              <i class="{{ file_type.get('icon', 'fas fa-file') }} text-xl"></i>
            </div>
            <div class="font-medium text-gray-900 truncate max-w-[200px] sm:max-w-none">{{ file.name }}</div>
          </div>
          <div class="hidden md:block text-gray-700">{{ (file.size / 1024)|round(1) }} KB</div>
          <div class="hidden md:block text-gray-700">{{ file.modified }}</div>
          <div class="flex items-center justify-center">
            <a href="/download-file/{{ file.name }}"
              class="download-btn inline-block text-white bg-gray-700 hover:bg-gray-600 hover:shadow-md hover:shadow-neutral-100 transition-all px-4 py-2 rounded-lg font-medium">
              <i class="fas fa-download md:mr-2"></i>
              <span class="hidden md:inline">下载</span>
            </a>
          </div>
        </div>
        {% endfor %}
        {% else %}
        <!-- 空状态 -->
        <div class="text-center py-16">
          <div class="inline-block p-6 bg-gray-100 rounded-full mb-6">
            <i class="fas fa-folder-open text-4xl text-gray-400"></i>
          </div>
          <h3 class="text-2xl font-bold text-gray-800 mb-2">没有可下载的文件</h3>
          <p class="text-gray-600 max-w-md mx-auto mb-6">请将文件添加到电脑的"downloads"文件夹中</p>
        </div>
        {% endif %}
      </div>
    </div>
  </div>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // 搜索功能
      const searchInput = document.querySelector('input[type="text"]');
      const fileRows = document.querySelectorAll(".file-row");

      searchInput.addEventListener("input", function () {
        const searchTerm = this.value.toLowerCase();

        fileRows.forEach(row => {
          const fileName = row.querySelector(".font-medium").textContent.toLowerCase();
          if (fileName.includes(searchTerm)) {
            row.style.display = "grid";
          } else {
            row.style.display = "none";
          }
        });
      });

      // 下载按钮动画
      const downloadBtns = document.querySelectorAll(".download-btn");
      downloadBtns.forEach(btn => {
        btn.addEventListener("mouseenter", function () {
          this.querySelector("i").classList.add("animate-bounce");
        });

        btn.addEventListener("mouseleave", function () {
          this.querySelector("i").classList.remove("animate-bounce");
        });
      });
    });
  </script>
</body>

</html>